<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/mytoos.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.preview_imgbox {width: 400px;height:400px;border: 1px solid #ccc;overflow: hidden;}
			.preview_img {max-width: 100%;
			filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);}
		</style>
	</head>
	<body>
		<div class="preview_box">
			<div class="preview_imgbox">
				<img class="preview_img" src="img/demo.jpg"/>
			</div>
			<div class="preview_btn">
				<button class="show_preview" type="button" onclick="show_preview(this);">预览</button>
				<button class="choose_preview" type="button" onclick="choose_preview(this);">选择图片</button>
				<input type="file" class="preview_file" accept="image/*" value="img/demo.jpg" style="width: 0;height: 0;" onchange="preview_file_change(this)"/>
			</div>
		</div>
		
		<div id="test"></div>
		<script type="text/javascript">
			
			window.onload = function(){
			}
			
			
			
			/**********************************************************************************/
			/*
			 style样式
			 	.preview_imgbox {width: 400px;height:400px;border: 1px solid #ccc;overflow: hidden;}
				.preview_img {max-width: 100%;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);}//
			 html代码：
			 <div class="preview_box">
				<div class="preview_imgbox ">
					<img class="preview_img" src="img/demo.jpg"/>
				</div>
				<div class="preview_btn">
					<button class="show_preview" type="button" onclick="show_preview(this);">预览</button>
					<button class="choose_preview" type="button" onclick="choose_preview(this);">选择图片</button>
					<input type="file" class="preview_file" value="img/demo.jpg" style="width: 0;height: 0;" onchange="preview_file_change(this)"/>
				</div>
			</div>
			*/
			//@parm:parm:若parm是字符串，则指预览的图片的id，否则为触发的按钮dom；
			function show_preview(parm){
				var obj;
				if(typeof parm === "string"){
					obj = document.getElementById(parm);
				}else{
					obj = getChildNodes(parm.parentNode.parentNode.childNodes)[0];
					obj = getChildNodes(obj.childNodes)[0];
				}
				//获取要预览的图片的地址或filter
				var src = obj.src || getStyle(obj,"filer") || getStyle(obj,"FILTER");
				if(!src){
					var sty = obj.getAttribute("style");
					if(sty){
						var styArr = sty.split(";");
						for (var i = 0;i<styArr.length;i++) {
							if(styArr[i].toUpperCase().indexOf("FILTER") != -1){
								src = styArr[i];
							}
						}
					}
				}
				//alert(src);
				return src;
			}
			
			//@parm:parm:若parm是字符串，则指样式类名为 preview_flie 的文件框的id，否则为触发的按钮dom；
			function choose_preview(parm){
				var obj = typeof parm === "string"?document.getElementById(parm):parm.parentNode.getElementsByTagName("input")[0];
				obj.click();
			};
			
			//监听文件框的值是否变化
			function preview_file_change(parm){
				//获取文本框对应的dom
				var obj = typeof parm === "string"?document.getElementById(parm):parm;
				var par = obj.parentNode.parentNode;
				var imgbox,img,imgClassName;
				imgbox = getChildNodes(par.childNodes)[0];
				img = getChildNodes(imgbox.childNodes)[0];
				imgClassName = img.className;
				previewImage(imgbox,img,obj,imgClassName,function(){
					//alert(1);
				});
			}
			
			
			/* 
			 * 上传的图片预览，并做自适应操纵
			 * 
			 * @parm:divid:预览图片的父元素的id或所对应的dom，指preview_imgbox
			 * 			imgid:预览图片的id或所对应的dom，指preview_img
			 * 			fileid:文件框的id或所对应的dom，指preview_file:注意文件框不能定义display="none";不然在ie上不起作用。
			 * 
			 * 由于IE8和IE9浏览器的问题，导致在图片上传过程中出现的不显示，无法验证的情况，请参考以下解决：
				1、如果需要使用IE系列浏览器，请换用IE10以上的现代浏览器
				2、如果需要继续使用IE8或IE9，请按以下方法设置
					a、找到 Internet选项 
						-->安全设置
						-->自定义级别
						-->ActiveX 控件和插件 
						-->启用  对未标记为可安全执行脚本的ActiveX控件初始化并执行脚本
					b、找到 Internet选项 
						-->安全设置
						-->自定义级别
						-->ActiveX 控件和插件 
						-->启用  将文件上载到服务器时包含本地目录路径
				3、换用其他现代浏览器，如谷歌等。
				4、如果下载的浏览器有急速和IE兼容模式，请切换成急速模式，来获得更好的体验。	
			 * */
			function previewImage(divid,imgid,fileid,imgClassName,cb){
			  var div = typeof divid === "string" ? document.getElementById(divid):divid;
			  var img = typeof imgid === "string" ? document.getElementById(imgid):imgid;
			  var file = typeof fileid === "string" ? document.getElementById(fileid):fileid;
			  //id的最大宽度和高度	
			  var MAXWIDTH  = div.clientWidth; 
			  var MAXHEIGHT = div.clientHeight;
			  if (file.files && file.files[0])
			  {
			      var reader = new FileReader();
			      reader.onload = function(evt){
			      	img.src = evt.target.result;
			      	getImgSizes(img.src,function(w,h){
			      		var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, w,h);
				        img.width  =  rect.width;
				        img.height =  rect.height;
				        img.style.marginTop = rect.top+'px';
				        img.style.marginLeft = rect.left+'px';
				        cb&&cb();
			      	})
			      }
			      reader.readAsDataURL(file.files[0]);
			  }
			  else //兼容IE
			  {
			    var sFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
			    file.select();
					//取消选中文件上传按钮
					file.blur();
					file.parentNode.focus();
					//var src = document.selection.createRange().text;
			    var src = file.value;
			 		checkPhoto(src,function(w,h){
				    var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, w, h);
						div.innerHTML = "<div class='"+imgClassName+"' style='width:"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;;margin-left:"+rect.left+"px;"+sFilter+src+"\"'></div>";
						cb&&cb();
			 		});
			  }
			}
			
			/*****************************************************************************************************/
		</script>
	</body>
</html>
